<template>
  <div>
    <div class="content_box content_fixed">
    <p class="drawal_title">可用余额</p>
      <h4 class="drawal_money">{{remain}}</h4>
      <div class="cash_title">提现金额</div>
      <div class="input_box">
        <!-- <input type="number" v-model="value" maxlength="6"> -->
        <van-field v-model="value" type="number" maxlength="6" class="van_filed"/>
        <span class="icon_rate">¥</span>
        <span class="icon_element">元</span>
        <span class="input_line"></span>
      </div>
      <div class="password">
        <span class="password_text">提现密码：</span>
        <van-field v-model="password" type="password" maxlength="12" class="van_filed_psw"/>
      </div>
      <van-button color="#288dff" class="sure_btn" @click="onConfirm">确定</van-button>
      <div class="tips">
        <p style="color: #ff0000">备注：提现余额兑换不收取手续费，兑换后不可退换，支付宝、微信在线充值手续需自己承担！大额建议转账加币（支付宝扫码转账），不收取手续费！</p>
        <p>支付宝转账加币说明</p>
        <p>账号：youquhuyu2019@163.com</p>
        <p>支付宝收款码: <van-button class="btn" round color="#288dff" @click="showClick">获取收款码</van-button></p>
        <p>姓：李</p>
        <p>转账后联系对接加币</p>
        <p>附带转账截图+代理id</p>
        <p>（加币时间：早9--晚23，其他时间不加币）</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getBalanceCash, getHomePage } from '../../../network/home';
export default {
  data() {
    return {
      value: '',
      password: '',
      remain: 0,
      imgData: require('../../../assets/img/withdrawal/ali_pay.png'),
      show: false
    }
  },
  created () {
    getHomePage().then(res => {
      if (res.state === 'ok') {
        this.remain = res.data.cash_remain || 0
      } else if (res.state === 'err') {
            if(res.msg === 'no_login') {
              this.$toast(res.msg)
              this.$router.replace('/login')
            }else {
              this.$toast(res.msg)
            }
          }
    }) ;
  },
  methods: {
    onConfirm() {
      if (this.value > this.remain) {
         this.$toast('提现余额不足,请重试~')
         this.value = ''
         this.password = ''
         return
      }
      getBalanceCash(this.value, this.password).then(res => {
        if (res.state === 'ok') {
          this.remain = this.remain - parseFloat(this.value)
          this.$toast('提现成功')
        }else{
          this.$toast(res.msg)
        }
        this.value = ''
        this.password = ''
      })
    },
    showClick() {
      this.$emit('show-click')
    }
  },
}
</script>

<style scoped>
.drawal_title {
  font-size: 24px;
  color: #999;
}

.drawal_money {
  padding: 30px 0;
  font-size: 66px;
  color: #333;
}

.detail_btn {
  width: 180px;
  height: 75px;
  border-radius: 10px;
  font-size: 24px;
  color: #4152E5;
  border: 1px solid #4152E5;
  font-weight: 500;
  background: #fff;
}

.cash_title {
  text-align: left;
  font-size: 30px;
  color: #333;
  padding: 50px 0 30px 0;
}

.input_box {
  width: 680px;
  height: auto;
  position: relative;
}

.input_line {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 680px;
  height: 1px;
  background: #999;
}

.van_filed {
  border: 0;
  width: 680px;
  height: 88px;
  line-height: 88px;
  font-size: 60px;
  width: 500px;
  padding: 0;
  padding-left: 60px;
}

.icon_element {
  font-size: 30px;
  color: #333;
  position: absolute;
  bottom: 0;
  right: 0;
}

.icon_rate {
  position: absolute;
  font-size: 70px;
  bottom: 0;
  left: 0;
}

.content_box {
  padding: 100px 35px 0;
  margin: 0 auto;
  text-align: center;
}

.password {
  margin-top: 40px;
  display: flex;
  align-items: center;
}

.password_text {
  width: 200px;
  font-size: 28px;
  color: #333;
}

.van_filed_psw {
  flex: 1;
  height: 88px;
  line-height: 88px;
  font-size: 36px;
  padding: 0;
  border-bottom: 1px solid #666;
}

.sure_btn {
  width: 680px;
  height: 88px;
  margin-top: 50px;
  border-radius: 10px;
  font-size: 28px;
}

.textarea_box {
  border: 1px solid #eee;
  border-radius: 20px;
  font-size: 28px;
  line-height: 36px;
  margin-top: 30px;
}

.tips {
  padding-top: 30px;
  line-height: 40px;
  color: #333;
  text-align: left;
  font-size: 24px;
}

.btn {
  font-size: 24px;
  width: 180px;
  height: 40px;
}

</style>